Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@/climatemappedafrica Hero page map colour codes #993

Merged
merged 4 commits into from
Nov 8, 2024

Conversation

koechkevin
Copy link
Contributor

@koechkevin koechkevin commented Nov 7, 2024

Description

As per the feedback given during the demo, it is a requirement that all maps on Climatemapped Africa be colour-coded to match the explore page. In the words of Eric Climatemapped mirrors Pesa Yetu, the designs don't need to be exactly the same but Climatemapped should be an improvement of PesaYetu features.
This PR

  • Adds colour codes to the Hero Map component.
  • Ensures map is visible on mobile devices

Fixes #992

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Screenshots

image
Screenshot 2024-11-07 at 12 20 39
Screenshot 2024-11-07 at 12 24 43

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation

- Made Map visible on mobile
@koechkevin koechkevin requested a review from a team November 7, 2024 09:43
@koechkevin koechkevin self-assigned this Nov 7, 2024
@koechkevin koechkevin changed the title @/climatemappedafrica Hero page map colou codes @/climatemappedafrica Hero page map colour codes Nov 7, 2024
@kilemensi
Copy link
Member

💯 @koechkevin . How does hovering look like?

@koechkevin
Copy link
Contributor Author

💯 @koechkevin . How does hovering look like?

@kilemensi I retained the hover colour as is on PesaYetu and location name appears next to Legend/Map Key

@kilemensi
Copy link
Member

@kilemensi I retained the hover colour as is on PesaYetu and location name appears next to Legend/Map Key

🤔 ... If a region already has that color, I believe it won't make any difference @koechkevin ... Try setting the color to choropleth color but opacity of between .6 - .8.

Copy link
Contributor

@m453h m453h left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me ✅

@kilemensi
Copy link
Member

Looks good @koechkevin

  1. There border on the map changes the first time you hover on it. I don't think this is the intended design (it doesn't on PesaYetu site) https://github.com/user-attachments/assets/95915108-d7c1-4da8-8262-839515d492f9
  2. Why two labels? Tooltip and text
Screenshot 2024-11-08 at 09 42 15 3. Can we remove the **right** `margin`/`padding` on the map so that everything aligns nicely to the right from top of the page to bottom? Screenshot 2024-11-08 at 09 46 21

Copy link
Contributor

@kelvinkipruto kelvinkipruto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kilemensi
Copy link
Member

If my comments above have been addressed @koechkevin, don't wait for my approval if others are happy with the PR.

@koechkevin koechkevin added this pull request to the merge queue Nov 8, 2024
Merged via the queue into main with commit 5324742 Nov 8, 2024
4 checks passed
@koechkevin koechkevin deleted the ft/climatemapped_update_hero_map_color_codes branch November 8, 2024 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Color Coding for the Map in ClimateMap Home Page
4 participants